<template>
	<div>
		<nav-bar title="我的钱包"></nav-bar>
		<view :style="{'margin-top':navHeight+'px'}" style="position: relative;">
			<mescroll-body ref="mescrollRef" :top="0" :down="downOption" :up="upOption" :bottom="0"
				@init="mescrollInit" @down="downCallback" @up="upCallback">
				<view class="header-fix">
					<view class="header">
						<view class="bg"></view>
						<view class="wallet-info">
							<view>
								<view class="price">钱包余额</view>
								<view class="price-num">{{totalMoney}}</view>
							</view>
							<view class="chargebtn" @click.stop="charge_click">
								<view class="charge-title">去充值</view>
								<image class="arrow" src="https://oss.jxhecong.com/v2/image/wallet_arrow@2x.png"></image>
							</view>
						</view>
					</view>
				</view>
				<!-- #ifdef MP-WEIXIN -->
				<u-sticky bgColor="#fff" :offsetTop="navHeight">
					<u-tabs :list="list" :inactiveStyle="{
					'color':'#606266',
					'font-size':'28rpx'
				}" :activeStyle="{
					'color':'#6ABF6C',
					'font-size':'32rpx',
					'font-weight':'bold'
				}" lineWidth="45" 
				lineColor="#6ABF6C" 
				:scrollable="false" @click="change"></u-tabs>
				</u-sticky>
				<!-- #endif -->
				<!-- #ifdef MP-ALIPAY -->
				<u-sticky bgColor="#fff" :offsetTop="navHeight">
					<u-tabs :list="list" :inactiveStyle="{
					'color':'#606266',
					'font-size':'28rpx'
				}" :activeStyle="{
					'color':'#6ABF6C',
					'font-size':'28rpx'
				}" lineWidth="45" 
				lineColor="#6ABF6C" 
				:scrollable="false" @click="change"></u-tabs>
				</u-sticky>
				<!-- #endif -->
				<view style="background-color:#F3F4F6;height:30rpx;"></view>
				<view class="content">
					<view v-for="(item,index) in dataList" :key="`${type}+${index}`" class="consume-cell">
						<consume :item="item" :type="type"></consume>
					</view>
				</view>
				<empty :show="showEmpty"></empty>
			</mescroll-body>
		</view>
	</div>
</template>

<script>
	var globalData = getApp({
		allowDefault: true
	}).globalData
	import navBar from '../components/navBar.vue'
	import consume from '../components/consume.vue'
	import * as userApi from '../../api/user/index.js'
	import * as walletApi from '../../api/wallet/index.js'
	import MescrollMixin from "@/components/mescroll-uni/components/mescroll-uni/mescroll-mixins.js"
	import mescrollBody from "@/components/mescroll-uni/components/mescroll-body/mescroll-body.vue"
	import empty from './@/components/empty.vue'
	import {
		paging
	} from '@/mixins/paging.js'
	export default {
		mixins: [MescrollMixin, paging],
		components: {
			consume,
			navBar,
			mescrollBody,
			empty
		},
		data() {
			return {
				navHeight: 0,
				list: [{
					name: '消费明细'
				}, {
					name: '充值明细'
				}],
				type: 0,
				barstyle: {
					"background-color": "#90C433"
				},
				totalMoney: 0,
				dataList: []
			}
		},
		onLoad() {
			this.navHeight = globalData.titleHeight;
		},

		onShow() {
			this.getUserInfo()
			this.getRechargeList()
		},
		methods: {
			change(e) {
				this.query.pageNum = 1;
				this.type = e.index;
				this.dataList = [];
				this.mescroll.resetUpScroll()
			},
			charge_click() {
				uni.navigateTo({
					url: '/pages/wallet/recharge'
				})
			},
			upCallback(page) {
				this.query.pageNum = page.num
				this.getRechargeList()
			},
			// 获取用户信息
			getUserInfo() {
				userApi.getUserInfo().then((res) => {
					let jsonStr = JSON.stringify(res.data)
					uni.setStorageSync('userInfo', jsonStr)
					this.totalMoney = res.data.totalMoney
				})
			},

			getRechargeList() {
				let type=this.type == 0 ? 1 : 0;
				walletApi.getRechargeList(type,this.query.pageNum).then((res) => {
					this.dataList = res.data;
					this.showEmpty=this.dataList.length==0?true:false;
					this.mescroll.endSuccess(this.dataList.length, false)
				}).catch((errMsg)=>{
					this.mescroll.endErr();
					uni.showToast({
						title:errMsg,
						icon:'none'
					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.header-fix {
		height: 145px;
		position: relative;
	}

	.header .bg {
		position: relative;
		display: block;
		width: 100%;
		height: 145px;
		background-color: #6ABF6C;
	}

	.wallet-info {
		position: absolute;
		z-index: 0;
		top: 34rpx;
		left: 30rpx;
		right: 30rpx;
		background: linear-gradient(124deg, #FDF0D3 0%, #E9CE93 100%);
		box-shadow: 0px 2px 5px 0px rgba(71, 55, 24, 0.1);
		border-top-left-radius: 18rpx;
		border-top-right-radius: 18rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 180rpx;
		padding: 30rpx;
	}

	.wallet-info .price {
		color: #674732;
		font-size: 28rpx;
	}

	.wallet-info .price-num {
		color: #674732;
		font-size: 60rpx;
		margin-top: 30rpx;
	}


	.wallet-info .chargebtn {
		width: 160rpx;
		height: 27px;
		line-height: 27px;
		font-size: 14px;
		background-color: rgba(255, 255, 255, 0.6);
		border-radius: 27px;
		text-align: center;
		margin-top: 25px;
		display: flex;
		justify-content: center;
		align-items: center;

		.arrow {
			width: 24rpx;
			height: 24rpx;
		}

		.charge-title {
			color: #674732;
			font-size: 28rpx;
			margin-left: 20rpx;
		}
	}

	.content {
		// margin-top: 182px;
		padding: 0px 15px;
		background-color: white;
	}

	.consume-cell {
		border-bottom: solid 1rpx #DDDDDD;
		padding-bottom: 15px;
		padding-top: 15px;
	}

	.consume-cell:last-child {
		border-bottom: none;
	}

	.empty {
		margin-top: 10px;
		text-align: center;
		color: #999;
	}
</style>
